import { View, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui';
import './style.scss';

/**
 * 更多门店
 * @returns
 */
const MoreShop = ({ shopInfo }) => {
  console.log('shopInfo', shopInfo);
  // const list = [
  //   {
  //     imgurl: shopInfo.imageUrl,
  //     title: shopInfo.store_name,
  //     desc: shopInfo.store_name,
  //     address: shopInfo.address,
  //   },
  // ];
  const toShopList = () => {
    Taro.navigateTo({
      url: '/subPages/shop/list-vip?type=view',
    });
  };

  const openMap = () => {
    Taro.openLocation({
      latitude: shopInfo.lat,
      longitude: shopInfo.lng,
    });
  };
  const callPhone = () => {
    Taro.makePhoneCall({
      phoneNumber: shopInfo.mobile,
    });
  };
  return (
    <View className="more-shop-wrap">
      <View className="shop-list-wrap">
        <View className="shop-item">
          <View className="item-top">
            <View className="item-left">
              <Image src={shopInfo.imageUrl} mode="aspectFill" />
              <View className="text-desc">
                <Text className="title">{shopInfo.store_name}</Text>
                <Text className="desc">{shopInfo.store_name}</Text>
              </View>
            </View>
            <View className="view-more" onClick={toShopList}>
              <Text>更多门店</Text>
              <AtIcon value="chevron-right" size={14} color="#ccc" />
            </View>
          </View>
          <View className="address-info">
            <AtIcon value="map-pin" size={14} color="#ccc" />
            <Text>{shopInfo.store_address}</Text>
          </View>
          <View className="tel-info">
            <View onClick={openMap}>
              <AtIcon value="map-pin" size={14} color="#ccc" />
              <Text>位置</Text>
            </View>
            <View onClick={callPhone}>
              <AtIcon value="phone" size={14} color="#ccc" />
              <Text>电话</Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};
export default MoreShop;
